<template>
  <div>
    <div class="myTab">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="linkOut" >
        <el-tab-pane label="免费系统课" name="first" >
          <div class="lessons">
            <Lessons></Lessons>
          </div>
         </el-tab-pane>
        <el-tab-pane label="逻辑课" name="second">
          <div class="lessons">
            <Lessons></Lessons>
          </div>
        </el-tab-pane>
        <el-tab-pane label="数学课" name="third">
          <div class="lessons">
            <Lessons></Lessons>
          </div>
        </el-tab-pane>
        <el-tab-pane label="英语课" name="fourth">
          <div class="lessons">
            <Lessons></Lessons>
          </div>
        </el-tab-pane>
        <el-tab-pane label="写作课" name="fifth">
          <div class="lessons">
            <Lessons></Lessons>
          </div>
        </el-tab-pane>
        <el-tab-pane label="美术课" name="sixth">
          <div class="lessons">
            <Lessons></Lessons>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>
<script>
  import Lessons from './common/lessons.vue'
  export default {
    name: "choiceLesson",
    components: {
      "Lessons": Lessons

    },
    data() {
      return {
        activeName: 'first'

      }
    },
    methods: {
      attr1() {
        alert("hello")
      },
      attr2() {
        alert("hello")
      },
      attr3() {
        alert("hello")
      },
      attr4() {
        alert("hello")
      },
      attr5() {
        alert("hello")
      },
      attr6() {
        alert("hello")
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }

  }
</script>
<style scoped>
  .linkOut {
/*    background-color: blue; */
/*    padding-left: 200px;
    padding-right: 200px; */
    padding-top: 30px;
    background-color: whitesmoke ;
  }

  .lessons{
    padding-left: 200px;
    padding-right: 200px;
  }
 .myTab >>> .el-tabs__header {
   padding-left: 200px !important;
   padding-right: 200px;

  }
  .myTab >>> .el-tabs__item {
    font-size: 18px !important;

  }
</style>
